<template>
	<view class="allComponents">
		<view class="itemComponents" v-for="item in list" @click="toUrl(item.url)" >
			<view>{{item.title}}</view>
			<text>{{item.info}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						title:'YinfoList&&Ytitle',
						info:'标题 及 信息展示',
						url:'../YinfoList/YinfoList'
					},
					{
						title:'YcolorBlock',
						info:'配合Ucharts使用的自定义图例',
						url:'../YcolorBlock/YcolorBlock'
					},
					{
						title:'Ydialog',
						info:'下沉式对话框 适合单手操作',
						url:'../Ydialog/Ydialog'
					},
					{
						title:'Ytabs',
						info:'tab标签',
						url:'../Ytabs/Ytabs'
					},
					{
						title:'Yselector',
						info:'下拉时间选择器 ',
						url:'../Yselector/Yselector'
					},
					{
						title:'Ybtns',
						info:'按钮组 可实现九宫格等功能',
						url:'../Ybtns/Ybtns'
					},
					{
						title:'YinputList',
						info:'表单插件',
						url:'../YinputList/YinputList'
					},
					{
						title:'Ywatermark',
						info:'全局水印',
						url:'../Ywatermark/Ywatermark'
					},
					{
						title:'YtabBtns',
						info:'选项卡按钮',
						url:'../YtabBtns/YtabBtns'
					},
					{
						title:'YuploadImg',
						info:'选择图片',
						url:'../YuploadImg/YuploadImg'
					},
					{
						title:'Ysearch',
						info:'搜索',
						url:'../Ysearch/Ysearch'
					},
					{
						title:'YprivacyBox',
						info:'隐私政策',
						url:'../YprivacyBox/YprivacyBox'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.allComponents{
		display: grid;
		grid-template-columns: 1fr;
		background-color: #fff;
		padding: 20rpx;
		.itemComponents{
			flex: 1;
			margin: 10rpx;
			padding: 30rpx;
			background-color: #f8f9ff;
			border-radius: 30rpx;
			transition: 0.2s;
			margin-bottom: 20rpx;
			&:active{
				transform: scale(0.9);
			}
			view{
				color: #333;
				font-size: 16px;
			}
			text{
				color: #999;
				font-size: 14px;
			}
		}
	}
</style>
